{$layout}

<!-- 拖动排序 -->
{$var "header"}
<script type="text/javascript" src="/js/sortable.min.js"></script>
{$end}

<div class="ui menu text blue small">
	<a href="/agents/groups" class="item" style="padding-right:0">分组</a>
	<a :href="'/agents/groups/detail?groupId=' + group.id" class="item active">“{{group.name}}” &raquo; 详情</a>
	<a :href="'/agents/groups/noticeReceivers?groupId=' + group.id" class="item">通知设置</a>
</div>

<div class="ui divider"></div>

<h3>详情 <a :href="'/agents/groups/update?groupId=' + group.id" v-if="group.id.length > 0">修改</a> </h3>

<table class="ui table selectable definition">
	<tr>
		<td class="title">分组名称</td>
		<td>{{group.name}}
			<span v-if="isExpired" class="ui label tiny red">已失效</span>
		</td>
	</tr>
	<tr>
		<td>Agent数量限制</td>
		<td>
			<span v-if="group.maxAgents > 0">{{group.maxAgents}}</span>
			<span v-if="group.maxAgents == 0">没有限制</span>
		</td>
	</tr>
	<tr>
		<td>开始生效日期</td>
		<td>
			<span v-if="group.dayFrom.length > 0">{{group.dayFrom}}</span>
			<span v-if="group.dayFrom.length == 0">没有限制</span>
		</td>
	</tr>
	<tr>
		<td>失效日期</td>
		<td>
			<span v-if="group.dayTo.length > 0">{{group.dayTo}}</span>
			<span v-if="group.dayTo.length == 0">没有限制</span>
		</td>
	</tr>
	<tr>
		<td>临时密钥</td>
		<td>
			<span v-if="group.keys == null || group.keys.length == 0">还没有临时密钥</span>
			<div v-if="group.keys != null && group.keys.length > 0">
				<a href="" @click.prevent="showKeys()">共{{group.keys.length}}个密钥 <i class="icon angle" :class="{down:!keysVisible, up:keysVisible}"></i> </a>
				<table class="ui table" v-show="keysVisible">
					<thead class="full-width">
						<tr>
							<th>密钥</th>
							<th>开始日期</th>
							<th>结束日期</th>
							<th>Agent数量限制</th>
							<th>已使用</th>
						</tr>
					</thead>
					<tr v-for="(key,index) in groupKeys" @click.prevent="selectKey(index)" :class="{active:index == selectedKeyIndex}">
						<td>{{key.key}}</td>
						<td>
							<span v-if="key.dayFrom.length > 0">{{key.dayFrom}}</span>
							<span v-if="key.dayFrom.length == 0" class="disabled">没有限制</span>
						</td>
						<td>
							<span v-if="key.dayTo.length > 0">{{key.dayTo}}</span>
							<span v-if="key.dayTo.length == 0" class="disabled">没有限制</span>
						</td>
						<td>
							<span v-if="key.maxAgents > 0">{{key.maxAgents}}</span>
							<span v-if="key.maxAgents <= 0" class="disabled">没有限制</span>
						</td>
						<td>
							<span v-if="key.countAgents > 0">{{key.countAgents}}</span>
							<span v-if="key.countAgents == 0" class="disabled">0</span>
						</td>
					</tr>
				</table>
			</div>
		</td>
	</tr>
	<tr>
		<td>永久密钥</td>
		<td>
			<span v-if="group.key == null || group.key.length == 0">还没有密钥，<a href="" @click.prevent="generateKey()">点此生成</a></span>
			<span v-if="group.key != null && group.key.length > 0">{{group.key}} &nbsp; <a href="" @click.prevent="generateKey()">[重新生成]</a> </span>
			<p class="comment">可用于Agent快速接入，没有日期限制，可参考<a href="http://teaos.cn/doc/agents/InstallGroupKey.md" target="_blank">在线文档</a>。</p>
		</td>
	</tr>
</table>

<h3 style="margin-top:2em!important">主机 &nbsp; <span v-if="countAllAgents > 0">({{countAllAgents}}个)</span></h3>
<form class="ui form segment" style="padding-bottom:0" v-if="hasAgents">
	<div class="ui fields inline">
		<div class="ui field">
			<input type="text" placeholder="输入主机名、主机地址检索" size="23" @input="changeKeyword()" v-model="keyword"/>
		</div>
		<div class="ui field">
			<select class="ui dropdown" v-model="filterOnline" @change="changeOnlineFilter()" style="width:5em">
				<option value="-1">所有</option>
				<option value="1">在线</option>
				<option value="0">离线</option>
			</select>
		</div>
		<div class="ui field" v-if="keyword.length > 0 || filterOnline != '-1'">
			<a href="" @click.prevent="resetKeyword()">清除条件</a>
		</div>
		<div class="ui field" v-if="(keyword.length > 0 || filterOnline != '-1') && agents.length > 0">
			<a href="" @click.prevent="selectAllAgents()">全选</a>
		</div>
		<div class="ui field" v-if="(keyword.length > 0 || filterOnline != '-1') && selectedAgents.length > 0">
			<a href="" @click.prevent="deleteAgents()" v-if="!isDeleting">删除所选({{selectedAgents.length}})</a>
			<span v-if="isDeleting" class="grey">删除中，请耐心等待...</span>
		</div>
	</div>
</form>

<p class="comment" v-if="agents.length == 0 && keyword.length == 0 && filterOnline == '-1'">暂时还没有主机。</p>
<p class="comment" v-if="agents.length == 0 && keyword.length > 0 || filterOnline != '-1'">暂时还没有匹配的主机。</p>
<table class="ui table selectable" v-if="agents.length > 0" id="agents-table">
	<thead>
		<tr>
			<th style="width:3em"></th>
			<th>主机名</th>
			<th>主机地址</th>
			<th class="two op">操作</th>
		</tr>
	</thead>
	<tbody v-for="agent in agents">
		<tr>
			<td style="text-align: center;">
				<i class="icon bars grey handle" v-if="keyword.length == 0 && filterOnline == '-1'"></i>
				<div class="ui checkbox" v-if="keyword.length > 0 || filterOnline != '-1'">
					<input type="checkbox" name="hostIds" v-model="agent.isChecked" @change="changeAgentChecked()"/>
					<label></label>
				</div>
			</td>
			<td>{{agent.name}}
				<br/>
				<span v-if="!agent.on" class="ui label tiny red">未启用</span>
				<span v-if="agent.isWaiting" class="ui label tiny green">已连接</span>
			</td>
			<td>{{agent.host}}</td>
			<td>
				<a :href="'/agents/board?agentId=' + agent.id">详情</a>
			</td>
		</tr>
	</tbody>
</table>

<p class="comment" v-if="hasAgents && keyword.length == 0 && filterOnline == '-1'">可以拖动左侧的<i class="icon bars"></i>排序。</p>
